$(function() {

    // 获取当前登录用户的购物车数据
    loadCartData();
})

function bindEvent(){

    // 添加结算功能
    $(".btn-area").click(() => {
        // 提交一个隐藏的表单
        // 获取总金额
        let allTotal = $(".price-sum").find("em").text().substring(1);
        console.log(allTotal);
        $("input[name=total]").val(allTotal);
        // 全局提交表单
        $("#payForm").submit();
    });

    // 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
        let checked = $(".checkall").prop("checked") ? 1 : 0;
        $.each($(".j-checkbox"), (index, ele) => {
            // console.log(ele); // ele就是每次循环的复选框
            let quantity = $(ele).parents('.cart-item').find('.itxt').val();
            let id = $(ele).parents('.cart-item').find('[name=id]').val();
            console.log(id, checked, quantity);
            changeCartStatus(id, checked, quantity);
        });
        loadCartData();
    });
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function() {
        // if(被选中的小的复选框的个数 === 3) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 这个是所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            // 让当前的商品添加 check-cart-item 类名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
        // 同步状态到数据库
        // 获取购物车这行的id
        // this：代表当前的复选框
        let id = $(this).parent().parent('.cart-item').find("[name=id]").val();
        // 获取复选框的状态
        let checked = $(this).prop('checked') == true ? 1 : 0;
        // 获取数量
        let quantity = $(this).parent().parent('.cart-item').find(".itxt").val();
        console.log(id, checked, quantity);
        changeCartStatus(id, checked, quantity);
    });
    // 3. 增减商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。
    $(".increment").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        // 3. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计
        // 当前商品的价格 p
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1); //p为字符串型
        console.log(p);
        var price = (p * n).toFixed(2); //这里有隐式转换
        // 小计模块
        // toFixed(2) 可以让我们保留2位小数
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
        // 同步数量
        var id = $(this).parents('.cart-item').find('[name=id]').val();
        var checked = $(this).parents('.cart-item').find('.j-checkbox').prop("checked") ? 1 : 0;
        var quantity = $(this).prev(".itxt").val();
        console.log(id, checked, quantity);
        changeCartStatus(id, checked, quantity);
    });
    $(".decrement").click(function() {
        // 得到当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        // var p = $(this).parent().parent().siblings(".p-price").html();
        // parents(".p-num") 返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        // 小计模块
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
        // 同步数量
        var id = $(this).parents('.cart-item').find('[name=id]').val();
        var checked = $(this).parents('.cart-item').find('.j-checkbox').prop("checked") ? 1 : 0;
        var quantity = $(this).next(".itxt").val();
        console.log(id, checked, quantity);
        changeCartStatus(id, checked, quantity);
    });
    //  4. 用户修改文本框的值 计算 小计模块
    $(".itxt").change(function() {
        // 先得到文本框的里面的值 乘以 当前商品的单价
        var n = $(this).val();
        // 当前商品的单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    // 5. 计算总计和总额模块
    getSum();

    function getSum() {
        var count = 0; // 计算总件数
        var money = 0; // 计算总价钱
        $(".itxt").each(function(i, ele) {
            if ($(ele).parents('.cart-item').find('.j-checkbox').prop("checked")) {
                count += parseInt($(ele).val()); //获取过来的值为字符型（需要转化成数字型）
            }
        });
        $(".amount-sum em").text(count); //修改总件数
        $(".p-sum").each(function(i, ele) {
            if ($(ele).parents('.cart-item').find('.j-checkbox').prop("checked")) {
                money += parseFloat($(ele).text().substr(1));
            }
        });
        $(".price-sum em").text("￥" + money.toFixed(2)); //修改总价钱
    }
    // 6. 删除商品模块
    // (1) 商品后面的删除按钮
    $(".p-action a").click(function() {
        // 删除的是当前的商品
        // $(this).parents(".cart-item").remove();
        getSum();
        // 同步到数据库
        let id = $(this).parents('.cart-item').find('[name=id]').val();
        console.log(id);
        if (confirm("您确认删除该条购物车记录吗?")) {
            $.getJSON("/api/cart/deleteById", {id},ret => {
                console.log(ret);
                loadCartData();
            });
        }
    });
    // (2) 删除选中的商品
    $(".remove-batch").click(function() {
        // 删除的是小的复选框选中的商品
        // $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
        console.log($(".j-checkbox:checked"));
        let idArr = [];
        $.each($(".j-checkbox:checked"), (idx, ele) => {
            let id = $(ele).parents('.cart-item').find('[name=id]').val();
            console.log(id);
            idArr.push(id);
        });
        console.log(idArr);
        $.getJSON("/api/cart/deleteByIds", {ids : idArr.join(",")}, ret => {
            console.log(ret);
            loadCartData();
        })
    });
    // (3) 清空购物车 删除全部商品
    $(".clear-all").click(function() {
        // $(".cart-item").remove();
        getSum();
        $.getJSON("/api/cart/truncateCart", ret => {
            console.log(ret);
            loadCartData();
        });
    })
}

function loadCartData(){
    $.getJSON("/api/cart/findCart", ret => {
        console.log(ret);
        if (ret['code'] == 3003) {
            let cartVoList = ret['data'];
            let cartItemListStr = '';
            cartVoList.forEach(cartVo => {
                cartItemListStr += `
                    <div class="cart-item ${cartVo.checked == 1 ? 'check-cart-item' : ''}">
                        <input type="hidden" value="${cartVo.id}" name="id"/>
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox" ${cartVo.checked == 1 ? 'checked' : ''}>
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="/upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">${cartVo.name}</div>
                        </div>
                        <div class="p-price">￥${cartVo.price}</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="${cartVo.quantity}">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥${cartVo.price * cartVo.quantity}</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                `;
            });
            $(".cart-item-list").html(cartItemListStr);
            // 加载数据成功
            // 绑定事件
            bindEvent();
        }
    });
}

// 更新购物车状态
function changeCartStatus(id, checked, quantity){
    $.post("/api/cart/updateCart", {id, checked,quantity}, ret => {
        console.log(ret);
        loadCartData();
    }, "json");
}